<template>
  <div class="app-container">
    <div class="step">
      <div class="step-btm">
        <!-- 已计算 -->
        <el-divider content-position="left">已计算</el-divider>
        <div class="zd3-title">
          <p>
            <span>计算日期月份大于</span>
            <input v-model="danjuriqi1" type="text" placeholder="请输入计算日期月份大于" />
          </p>
          <el-button size="small" type="primary" :loading="isClick1" @click="importTable1">导出</el-button>
        </div>
        <!-- 发货单未计算导出 -->
        <el-divider content-position="left">发货单未计算导出</el-divider>
        <div class="zd3-title">
          <p>
            <span>单据日期</span>
            <input v-model="danjuriqi2" type="text" placeholder="请输入单据日期" />
          </p>
          <el-button size="small" type="primary" :loading="isClick2" @click="importTable2">导出</el-button>
        </div>
        <!-- 回款未计算导出 -->
        <el-divider content-position="left">回款未计算导出</el-divider>
        <div class="zd3-title">
          <p>
            <span>回款日期</span>
            <input v-model="danjuriqi3" type="text" placeholder="请输入回款日期" />
          </p>
          <el-button size="small" type="primary" :loading="isClick3" @click="importTable3">导出</el-button>
        </div>
        <!--按照导入时间导出发货单 -->
        <el-divider content-position="left">客户余额导出</el-divider>
        <div class="zd3-title">
          <p>
            <span>单据日期</span>
            <input v-model="danjuriqi4" type="text" placeholder="请输入单据日期" />
          </p>
          <el-button size="small" type="primary" :loading="isClick4" @click="importTable4">导出</el-button>
        </div>
      </div>
    </div>
    <!-- <div class="submits">
      <div class="add" @click="save">确认信息</div>
    </div> -->
  </div>
</template>

<script>
import { exportFahuo,exportHuikuan,exportYijisuan,exportKehuye } from '@/api/neimao'
export default {
  data(){
    return{
      danjuriqi1: '',
      danjuriqi2: '',
      danjuriqi3: '',
      danjuriqi4: '',
      isClick1: false,   //是否点击
      isClick2: false,   //是否点击
      isClick3: false,   //是否点击
      isClick4: false,   //是否点击
    }
  },
  mounted(){
    // this.getlist()
  },
  methods:{
    importTable1(){
      this.isClick1 = true
      exportYijisuan({jisuanriqi: this.danjuriqi1 ? this.danjuriqi1 : null,queren:'已计算'}).then(res => {
        console.log(res)
        // const filename = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=',''); //先解码，得文件名
        // let blob = new Blob([res.data],{type: "application/vnd.ms-excel"}); //指定文件MIME 
        // let a = document.createElement('a');
        // a.download = filename; //指定下载的文件名
        // a.href = URL.createObjectURL(blob); //  URL对象
        // a.click(); // 模拟点击
        // URL.revokeObjectURL(a.href); // 释放URL 对象
        
        console.log(decodeURI(res.headers['filename']));
        const link = document.createElement("a");
        // let filename1 = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=','') || '导出文档'
        let filename1 = '已计算列表'
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", filename1);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.isClick1 = false
      })
    },
    importTable2(){
      this.isClick2 = true
      exportFahuo({danjuriqi: this.danjuriqi1 ? this.danjuriqi1 : null,queren:'未计算'}).then(res => {
        console.log(res)
        console.log(decodeURI(res.headers['filename']));
        const link = document.createElement("a");
        // let filename1 = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=','') || '导出文档'
        let filename1 = '发货单未计算列表'
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" })
        link.style.display = "none"
        link.href = URL.createObjectURL(blob)
        link.setAttribute("download", filename1)
        document.body.appendChild(link)
        link.click();
        document.body.removeChild(link)
        this.isClick2 = false
      })
    },
    importTable3(){
      this.isClick3 = true
      let that = this
      exportHuikuan({huikuanriqi: this.danjuriqi3 ? this.danjuriqi2 : null}).then(res => {
        console.log(res)
        console.log(decodeURI(res.headers['filename']));
        const link = document.createElement("a");
        // let filename1 = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=','') || '导出文档'
        let filename1 = '回款未计算列表'
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", filename1);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.isClick3 = false
      })
    },
    importTable4(){
      this.isClick4 = true
      exportKehuye({danjuriqi: this.danjuriqi4 ? this.danjuriqi4 : null}).then(res => {
        console.log(res)
        console.log(decodeURI(res.headers['filename']));
        const link = document.createElement("a");
        // let filename1 = decodeURI(res.headers['content-disposition'].split(';')[1]).replace('filename=','') || '导出文档'
        let filename1 = '客户余额表'
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.setAttribute("download", filename1);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.isClick4 = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    getlist(){
      jisuanlist({}).then(res => {
        console.log(res)
        this.tempdata = res.data
      })
    },
    save(){
      updatejisuan(this.tempdata).then(res => {
        console.log(res)
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.getlist()
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-divider {
	background-color: #18A05E;
	position: relative;
}
/deep/.el-divider--horizontal {
  height: 2px;
  margin: 40px 0;
}
/deep/.el-divider__text {
	color: #18A05E;
  font-size: 16px;
  font-weight: 600;
}
.submits{
	display: flex;
	background: #ffffff;
	padding: 0 20px 20px 0;
	justify-content: flex-end;
	align-items: center;
	>div{
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 32px;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		margin-left: 30px;
		cursor: pointer;
	}
  .add{
    background: #18A05E;
  }
	.save{
		background: #2196F3;
	}
	.nosave{
		background: #999;
	}
}
.step {
  padding: 20px;
  background: #fff;
}
.box{
  .onetitle{
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px;
  }
  .twotitle{
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 5px 0;
  }
  .tips{
    font-size: 12px;
    color: #999;
    display: flex;
    padding: 10px 0 0 20px;
    >div{
      >p{
        margin: 0;
      }
    }
  }
}
/deep/.el-input{
  width: 120px !important;
  margin: 0 10px;
  border: none;
  border-bottom: 1px solid #999;
}
/deep/.el-input--medium .el-input__inner{
  width: 120px !important;
  height: 25px !important;
  line-height: 25px !important;
  border: none;
  color: #18A05E;
}
.zd3-title {
	// height: 80px;
	display: flex;
  flex-wrap: wrap;
	align-items: center;
	padding: 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
    display: flex;
    color: #333;
    align-items: center;
    margin: 10px 30px 10px 0;
		> span {
			padding-right: 20px;
      width: 80px;
		}

		> input {
			width: 200px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		width: 64px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
		margin-right: 30px;
	}
}
</style>